
<template>
    <div class="wrapper" ref="wrapper">

    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import  {EChartsOption} from 'echarts'
import * as echarts from 'echarts';
@Component
export default class Chart extends Vue {
    @Prop() options?: EChartsOption
    chart?: any;

    mounted() {
        
        if(this.options === undefined){
            return console.error('options 为空');   
        }
        this.chart = echarts.init(this.$refs.wrapper as HTMLDivElement)
        this.chart.setOption(this.options)
    }
    @Watch('options')
    onOptionChange(newValue:EChartsOption){
        this.chart!.setOption(newValue)
    }
}
</script>

<style scoped  >
.wrapper {
    height: 400px;
  }
</style>